<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<% include ../head.html %>
</head>
<body>
	<div id="head">
		<% include ../top_bar.html %>
		<script type="text/javascript">$('#index').addClass('active');</script>
	</div>
	<div id="wrap">
		<div id="main">
			<div id="content">
				<div class="panel">
				    <div id="innner">
						<div>
							<ul class="breadcrumb">
							    <li><a href="#">首页</a> <span class="divider">/</span></li>
							    <li class="active">新的槽点</li>
						    </ul>
						</div>
						<div class="topic-content">
							<form action="/topic/releaseTopic" method="post" id="form1" class="form-horizontal">
							<div>
								<label class="lgy-label">标题</label>
								<textarea rows="1" name="title" placeholder="为你的吐槽来一个标题，字数控制在10-50字之间" class="title-txtarea"></textarea>
							</div>
							<div>
								<label class="lgy-label">内容</label>
								<div class="tabbable">
									<ul class="nav nav-pills">
										<li class="active"><a data-toggle="pill" href="#markdown">markdown</a></li>
										<li><a class="preview-btn" data-toggle="pill" href="#preview">预览</a></li>
										<!-- <li><a data-toggle="pill" href="#tags">标签</a></li> -->
									</ul>
									<div class="tab-content">
										<div id="markdown" class="active tab-pane">
											<div id="wmd-button-bar"></div>
											<div class="input">
												<textarea rows="20" name="content" id="wmd-input" class="content-txtarea" placeholder="卧槽。。。"></textarea>
											</div>
										</div>
										<div class="tab-pane" id="preview">
											<div class="wmd-preview topic-wmd-preview" id="wmd-preview"></div>
										</div>
										<div class="tab-pane" id="tags">
											<div class="tags_select">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div>
								<div id="tags"></div>
								<input type="text" id="tag_txt" name="tag_txt"/>
							</div>
							<div>
								<button type="button" id="save_btn" class="btn btn-success">发布</button>
							</div>
							</form>
						</div>
				    </div>
				</div>
			</div>
			<div id="sidebar">
				<% include ../user/user_info.html %>
				<div class="panel">
					<div class="header">热门吐槽</div>
					<div class="inner">
						ddd
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="foot">
	
	</div>
	<script type="text/javascript" src="<%=site_host%>/markdown/Markdown.Converter.js"></script>
	<script type="text/javascript" src="<%=site_host%>/markdown/Markdown.Editor.js"></script>
	<script type="text/javascript" src="<%=site_host%>/markdown/showdown.js"></script>
	<script type="text/javascript">
		$('#save_btn').click(function(){
			$('#form1').submit();
		}); 
		$(document).ready(function () {
            //var editors = {};
            var editor;
            function run_md_editor() {
                var converter = new Showdown.converter();
                editor = new Markdown.Editor(converter);
                editor.run();
                /*editors[""] = new Markdown.Editor(converter);
                editors[""].run();
                 $('.reply2_editor').each(function() {
                    var editor_id = $(this).attr('id');
                    var suffix = editor_id.slice(editor_id.indexOf('-'));
                    editors[suffix] = new Markdown.Editor(converter, suffix);
                    editors[suffix].run();
                }); */
            }
            run_md_editor();
            
            $('#wmd-input').mouseover(function(){
                $('#wmd-input').focus()
            });
            $('.preview-btn').click(function() {
                //var href = $(this).attr('href');
               //var index = href.lastIndexOf('-');
                //var suffix = index < 0 ? '' : href.slice(index);
                //editors[suffix].makePreviewHtml();
                editor.makePreviewHtml();
                //prettyPrint();
            });
            /* document.onkeyup=function(event) {
                if(window.ActiveXObject) {
                    var keydown = window.event.keyCode;
                    event=window.event;
                }else{
                    var keydown = event.keyCode;
                    if(event.ctrlKey == true && keydown == 13){
                        if(submit_btn){
                            submit_btn.click();
                        }
                    }
                }
            }; */
        });
		
		$('#tag_txt').bind('keydown', function(evt){
	  		if(evt.keyCode == 32){
		  		console.log('生成tag');
		  		createTag();
	  		}
	  	});
	  	var exist_map = new Object();
	  	function createTag(){
	  		var txt = $('#tag_txt');
	  		var val = $.trim(txt.val());
	  		if(val != '' && !exist_map[val]){
		  		txt.val('');
		  		$('#tags').append('<span class="tag" id="'+val+'">'+val+'<a href="javascript:removeTag(\''+val+'\');">X</a></span>');
		  		exist_map[val] = val;
	  		}
	  	}
	  	function removeTag(tid){
	  		$('#'+tid).remove();
	  		exist_map[tid] = null;
	  	}
	</script>
</body>
	
</html>